William Shakes Pear

Duration

3 weeks, fall 2025

Course

Web Development

Tools

Visual Studio Code, Figma, Procreate

William Shakes Pear is a playful, hand-built interactive website that introduces the works of William Shakespeare through humor, motion, and experimentation. Built from scratch using HTML, CSS, and JavaScript, the project explores how interaction and animation can create an expressive, memorable web experience.

By pairing Shakespeare’s plays with playful, unexpected interactions, the site invites users into the Pearverse — a space designed not for reading Shakespeare, but for meeting him. Through exploration, movement, and interaction, users are introduced to his works in a lighthearted, accessible way.

It all started with a bad meme.

Memes are fun, immediate, and oddly effective at pulling people in — and it made me wonder why so many digital experiences, especially educational or cultural ones, don’t try to be fun at all.

I’ve been a Shakespeare nerd since high school. I love his plays, his language, and the strange worlds he created — but I also know how hard it can be to approach his work. The texts are dense, the language is unfamiliar, and the way Shakespeare is often presented can feel intimidating or distant.

So I started asking a simple question: What if Shakespeare were introduced in a way that actually invites people in?

William Shakes Pear is my attempt to answer that question. The project takes the seriousness usually associated with Shakespeare and replaces it with curiosity, play, and interaction.

Using data from a public William Shakespeare API, I built a playful interactive ]'pearverse', where Shakespeare’s work becomes something fun to encounter, through the four pages: Catalogue, Find the Line, Word Frequency, and Pear Lab, users can get familiar with his plays without feeling overwhelmed.

This project is intentionally interaction-first. Rather than focusing on formal UX flows or polished visual systems, the goal was to push my front-end development skills and experiment with how behavior, motion, and responsiveness can shape an experience.

Alongside interaction design, I also designed and illustrated the pear character itself. The illustration was created as a functional part of the interface rather than a static visual — its form, expressions, and animations were designed to respond to user input and reinforce the playful tone of the site.

Character Interactions

The pear character responds to user input through motion and animation. Mouse movement, clicks, and idle states all trigger different behaviors, giving the character a sense of personality and presence rather than functioning as a static illustration.

Exploration Tools

Instead of presenting Shakespeare’s work as long-form text, the site introduces it through exploratory tools.

Pear Lab

The Pear Lab is an interactive quiz that determines a user’s Shakespeare-inspired “pearsonality.” Designed as a playful experiment, it encourages users to engage with Shakespeare’s themes and language in a low-pressure, entertaining way.